/*
 * 체크박스 스킨.
 * 
 * 사용법
 * 1. 본 파일 가져오기.
 * 	<script src=".../checkSkin.js"></script>
 * 
 * 2. 페이지 오픈시 setCheckBoxSkin() 함수 호출.
 * 	$(function() {
 * 		setCheckBoxSkin();
 * 	}
 * 
 * 3. 자바스크립트에서 값을 강제로 바꿀시 스킨은 바뀌지 않으므로
 * 	해당 체크박스 또는 모든 체크박스를 select 한 후 change() 함수를 호출하여야한다.
 * 	$("input:checkbox").change();
 */

function setCheckBoxSkin() {
	//기본 스킨 가리기.
	$("input[type=checkbox]")
		.css("opacity", 0)
		.css("filter", "alpha(opacity=0)")
		.css("position", "absolute")
		.css("right", 0)
		.css("top", 0)
		.css("width", 26)
		.css("height", 26)
		.css("cursor", "pointer");
	
	//부모 div.
	var divObj = $("<div/>", {
		class: "chk_rad"
	});
	$(divObj)
		.css("overflow", "hidden")
		.css("position", "relative")
		.css("border", "1px solid #fce000")
		.css("cursor", "pointer")
		.css("width", 26)
		.css("height", 26)
		.css("float", "left")
		.css("text-align", "center");
	
	//체크표시 span.
	var spanObj = $("<span/>");
	$(spanObj)
		.css("color", "#fce000")
		.css("font-weight", "bold")
		.css("cursor", "pointer")
		.css("font-size", "14pt")
		.css("line-height", "1.5em");
	
	var chks = $("input[type=checkbox");
	for(var i = 0; i < chks.length; i++) {
		$(chks[i]).attr("id2", "chk" + i);
		var cloneDiv = divObj.clone();
		var cloneSpan = spanObj.clone();
		$(cloneDiv).insertBefore( chks[i] );
		$(cloneDiv).append( chks[i] );
		$(cloneSpan).attr( "id", $(chks[i]).attr("id2") + "_isChecked" );
		$(cloneDiv).append( cloneSpan );
		
		//값 변경될 시 스킨 체인지.
		$(chks[i]).change(function() {
			if( this.checked ) {
				$( "input[id2=" + $(this).attr("id2") + "] + span").html( "X " );
				$(this).parent().css( "background", "#222222" );
			} else {
				$( "input[id2=" + $(this).attr("id2") + "] + span").html( " &nbsp;&nbsp; " );
				$(this).parent().css( "background", "#aaaaaa" );
			}
		});
	}
	
	//세팅 후 현재 상태에 따른 스킨 처리.
	//체크 시.
	$("input[type=checkbox]:checked").parent().css("background", "#222222");
	$("input[type=checkbox]:checked + span").html( "X " );
	
	//미체크 시.
	$("input[type=checkbox]:not(:checked)").parent().css("background", "#aaaaaa");
	$("input[type=checkbox]:not(:checked) + span").html( " &nbsp;&nbsp; " );
}